<!-- 顶部导航栏头部标题组件 -->
<!-- 注：此为根据屏幕定位，所以排版时注意顶部距离 -->
<!-- 传入属性 -->
<!-- title：标题
	     leftBtn：左边按键(文字)  默认为〈
	     leftImg：左边按键(背景图片) 可选
	     rightBtn:右边按键(文字)
		 rightNumber:右边按键(右上角数字)
	     rightImg:右边按键(背景图片)
	          备注：右边按键都是可选，若是都没有传值，则右边按键部分隐藏
	     pvuvName： pvuv埋点名称 -->
<!-- 传入使用的方法 -->
<!-- rightClicks：右边点击函数   （默认传入一个pvuvName） -->
<template>
	<div class="toHeadTitle">
		<!-- 标题文字 -->
		{{ title }}

		<!-- 左边返回上一级按键 -->
		<div class="toHeadTitle-left" :style="{ backgroundImage: 'url(' + leftImg + ')' }" @click="leftClick">
			{{ leftBtn }}
		</div>

		<!-- 右边备用按键 -->
		<div class="toHeadTitle-right" :style="{ backgroundImage: 'url(' + rightImg + ')' }" v-if="rightImg || rightBtn"
			@click="rightClick">
			<!-- 可传入文字 -->
			{{ rightBtn }}
			<!-- 购物车商品数量展示 -->
			<div class="toHeadTitle-right-top" v-if="rightNumber != 0" v-text="rightNumber > 99?'99+':rightNumber"
				:class="rightNumber>99?'ninenine':rightNumber>=10 && rightNumber<=99 ? 'ten':''">
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			//   传输内容
			// ----------------------------------------------------------
			//   标题
			title: {
				type: [String],
				default: "",
			},

			// 左边按键(文字)
			leftBtn: {
				type: [String],
				default: "",
			},

			// 左边按键(背景图片)
			leftImg: {
				type: [String],
				default: "https://oss4.komect.com/equity-home/h5/fh.png",
			},

			// 右边按键(文字)
			rightBtn: {
				type: [String],
				default: "",
			},

			// 右边按键(背景图片)
			rightImg: {
				type: [String],
				default: "",
			},

			// 右边按键(右上角数字)
			rightNumber: {
				type: [String, Number],
				default: "",
			},

			// pvuv埋点名称
			pvuvName: {
				type: [String],
				default: "",
			},
		},
		data() {
			return {};
		},
		methods: {
			//   左边返回上一级点击函数
			leftClick() {
				uni.navigateBack();
			},

			// 右边点击函数   （默认传入一个pvuvName）
			rightClick() {
				this.$emit("rightClicks", {
					pvuvName: this.pvuvName
				});
			},
		},
	};
</script>

<style>
	/* 组件外层 */
	.toHeadTitle {
		width: 100%;
		height: 44px;
		top: 0;
		position: fixed;
		z-index: 9999;
		background: #ffffff;
		font-size: 18px;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 600;
		text-align: center;
		color: #333333;
		/* border: solid 1px; */
		line-height: 44px;
	}

	/* 左边按键 */
	.toHeadTitle-left {
		width: 9px;
		height: 16px;
		/* border: solid 1px; */
		line-height: 16px;
		position: absolute;
		top: 14px;
		left: 16px;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	/* 右边按键 */
	.toHeadTitle-right {
		width: 20px;
		height: 20px;
		font-size: 14px;
		font-family: PingFangSC, PingFangSC-Regular;
		font-weight: 600;
		text-align: right;
		color: #505050;
		line-height: 20px;
		position: absolute;
		top: 12px;
		right: 22px;
		border: solid 1px;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	/* 右边按键左上角数字展示 */
	.toHeadTitle-right-top {
		display: inline-block;
		height: 14px;
		padding: 0 7px;
		background: #ff504d;
		border-radius: 7px;
		font-size: 11px;
		font-family: PingFangSC, PingFangSC-Regular;
		font-weight: 400;
		text-align: center;
		color: #ffffff;
		line-height: 14px;
		position: absolute;
		right: -10px;
		top: -7px;
	}

	/* 为两位数时 */
	.ten {
		padding: 0 5px;
		right: -12.5px;
	}

	/* 99+时 */
	.ninenine {
		padding: 0 5px;
		right: -19px;
	}
</style>
